<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()}+'/'">
    <title>支付界面</title>

    <script type="text/javascript" src="/plugins/qrious.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <script type="text/javascript" src="/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript">
        // var orderId = $("#orderId").val();
        var t;
        var n=0;
        $(function () {
            //3秒自动查询一下支付结果
            t = setInterval( "payBtn()", 1000*3);

        })
        function paysucc(orderId) {
            //查询订单状态
            $.post("/weixin/queryPayStatus",{"out_trade_no":orderId},function (data) {

                window.alert(data.trade_state_desc)

            })
        }
        //放弃支付
        function notPay(orderId) {
            $.post("/weixin/closePay",{"out_trade_no":orderId},function (data) {

                window.alert(data.result_code)
                //跳转到订单页面
                window.location.href="/order/list"

            })


        }

        function queryPay(orderId){
            $.post("/weixin/queryPayStatus",{"out_trade_no":orderId},function (data) {
                if(data.trade_state=='SUCCESS'){
                    clearInterval(t)
                    window.alert(data.trade_state_desc)
                    window.location.href="/order/list"

                }


            })
        }
        function payBtn(){

            n++

            console.log("刷新第"+n+"次")
            $("#payBtn").click()

        }


    </script>
</head>
<body>
    <div class="row" style="margin: 50px auto;width: auto" >
        <div class="row" style="width: 70%;margin: 0px auto">
            <div class="col-sm-7">
                <div class="row" style="margin-top: 20px" >
                    <table class="table table-condensed table-hover">
                        <tr class="active">
                            <td>订单号:</td>
                            <td  id="orderId" th:text="${out_trade_no}" th:value="${out_trade_no}"></td>
                        </tr>
                        <tr class="success">
                            <td>套餐信息</td>
                            <td th:text="${order.skuMsg}">套餐信息</td>
                        </tr>
                        <tr class="warning">
                            <td>商品名</td>
                            <td th:text="${good.goodName}">商品名</td>
                        </tr>
                        <tr class="danger">
                            <td>买家姓名</td>
                            <td th:text="${order.buyerName}">下单账号</td>
                        </tr>
                        <tr class="info">
                            <td>订单地址</td>
                            <td th:text="${order.address}">下单地址</td>
                        </tr>
                    </table>
                </div>
                <div class="row" >
                    <button th:onclick="queryPay([[${out_trade_no}]])" id="payBtn" class="hidden"></button>
                    <div class="btn-group" role="group" >
                        <button type="button" th:onclick="paysucc([[${out_trade_no}]])" class="btn  btn-group-lg btn-info" style="margin: auto">我已支付</button>
                    </div>
                    <div class="btn-group" role="group" >
                        <button type="button" th:onclick="notPay([[${out_trade_no}]])" class="btn btn-group-lg btn-info" style="margin: auto">放弃支付并关闭订单</button>

                    </div>
                    <div class="btn-group" role="group" >
                        <a href="/order/list"><button type="button" class="btn btn-group-lg btn-info" style="margin: auto">返回我的订单</button></a>

                    </div>

                </div>

            </div>

            <div class="col-sm-5" >
                <div class="row" style="width: 95%;margin: auto">
                    <input id="codeUrl" type="hidden"  th:value="${code_url}">
                    <span>二维码链接地址</span><br>
                    <span th:text="${code_url}"></span>

                </div>
                <div class="row" style="width: 95%;margin: auto">
                    <!-- 定义一个img的标签，给一个ID,然后由qrious插件来生成 二维码-->
                    <img id="qrcodeImg" class="img-thumbnail">

                </div>

            </div>

        </div>


    </div>
</body>



<script type="text/javascript">
    $(function () {
        //生成二维码
        var qr=new QRious({
            element:document.getElementById('qrcodeImg'),//指定显示生成后的二维码的img标签的ID
            size:250,// 显示生成的二维码尺寸
            value:$("#codeUrl").val(),// 实际要进行转换的数据
            level:'H'//精度度
        });
    })
</script>
</html>